<template>
  <div class="header-box">
    <!-- 头部 -->
    <div class="w">
      <div class="w-box">
        <div class="nav-logo">
          <h1>
            <router-link to="/home">XMall商城</router-link>
            <!-- <a>XMall商城</a> -->
          </h1>
        </div>
        <div class="right-box">
          <div class="nav-list">
            <el-autocomplete placeholder="请输入商品信息" icon="el-icon-search">
            </el-autocomplete>
            <router-link to="/allcategory">全部商品</router-link>
            <router-link to="/donation">捐赠</router-link>
            <!-- <a>捐赠</a> -->
            <span>|</span>
          </div>
          <div class="nav-aside">
            <div class="user pr">
              <i class="el-icon-user-solid" @click="toPersonal"></i>
              <a class="el-icon-shopping-cart-2" @click="toShopCart"></a>
            </div>
          </div>
          <div class="logout" @click="logout" v-show="token?true:false">退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper/js/swiper'
import 'swiper/css/swiper.css'
import { mapState } from 'vuex'

export default {
  data() {
    return {

    }
  },
  computed:{
    ...mapState({
      token:state => state.userInfo.token
    })
  },
  mounted() {
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: ".swiper-button-next",
      //   prevEl: ".swiper-button-prev",
      // }
    })
  },

  methods: {
    // 去全部商品页
    toAllCategory() {
      this.$router.push('/allcategory')
    },
    //去捐赠页
    toDonation() {
      this.$router.push('/donation')
    },
    // 去个人中心
    toPersonal() {
      this.$router.push('/personal')
    },
    // 去购物车
    toShopCart() {
      this.$router.push({
        name: 'shopcart',
        params: { userId: '3144' },
      })
    },
    //退出登录
    async logout(){
      const result = await this.$store.dispatch('logout')
      if(result === 'ok'){
        alert('退出成功')
        this.$router.replace('/login')
      }
    }
  },
}
</script>
<style lang="less">
.header-box {
  width: 100%;
  height: 100%;
  background-color: #ededed;
  .w {
    height: 100px;
    z-index: 30;
    position: relative;
    background: #060606;
    .w-box {
      padding: 0 150px;
      display: flex;
      width: 1220px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      // position: relative;

      h1 {
        height: 100%;
        display: flex;
        align-items: center;
        > a {
          background: url(../../../public/images/global-logo-red@2x.png)
            no-repeat 50%;
          text-indent: -9999px;
          background-size: cover;
          display: block;
          width: 50px;
          height: 40px;
          background-position: 0 0;
          align-items: center;
          margin-left: 15px;
        }
      }
      .right-box {
        display: flex;
        .nav-list {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 22px;
          .el-autocomplete {
            width: 305px;
          }
          a {
            width: 110px;
            color: #c8c8c8;
            display: block;
            font-size: 14px;
            padding: 0 25px;
            &:hover {
              color: #fff;
            }
          }
        }
        .nav-aside {
          line-height: 100px;
          a {
            margin-right: 30px;
          }

          .el-icon-user-solid {
            cursor: pointer;

            color: #999;
            font-size: 20px;
            margin: 0 30px;
          }

          .el-icon-shopping-cart-2 {
            cursor: pointer;

            color: #999;
            font-size: 20px;
            margin: 0 30px;
          }
        }
        .logout{
          line-height: 100px;
          font-size: 16px;
          color: white;
          margin-left: 20px;
          &:hover{
            cursor:pointer
          }
        }
      }
    }
  }
}
</style>
